$(document).ready(function (){
    $.ajax({
        url: "/ok",
        method: "get",
        async: true,
        contentType: "application/json; charset=UTF-8",
        success: function (data) {
            var result = data.map(item => { return { name: item[0], value: item[1] };   });
            
            var myEcharts = echarts.init(document.getElementById("box"));
        var option = {
            title: {  //标题样式
                text: 'ECharts 中国地图',
                x: "center",
                textStyle: {
                    fontSize: 18,
                    color: "red"
                },
            },
            tooltip: {  //这里设置提示框
                trigger: 'item',  //数据项图形触发
                backgroundColor: "red",  //提示框浮层的背景颜色。
                //字符串模板(地图): {a}（系列名称），{b}（区域名称），{c}（合并数值）,{d}（无）
                formatter: '地区：{b}<br/>模拟数据：{c}'
            },
            visualMap: {//视觉映射组件
                splitList: [ 
                    {start: 5000, end:6000},{start: 4000, end: 5000},
                    {start: 3000, end: 4000},{start: 2000, end: 3000},
                    {start: 1000, end: 2000},{start: 0, end: 1000},
                ],
                color: ['#ff0', '#ffff00', '#0E94EB','#6FBCF0', '#F0F06F', '#00CC00'],
                top: 'center',
                left: 'left',
                min: 10,
                max: 500000,
                text: ['High', 'Low'],
                realtime: false,  //拖拽时，是否实时更新
                calculable: true,  //是否显示拖拽用的手柄
                
            },
            series: [
                {
                    name: '人口数据',
                    type: 'map',
                    mapType: 'china',
                    roam: false,//是否开启鼠标缩放和平移漫游
                    itemStyle: {//地图区域的多边形 图形样式
                        normal: {//是图形在默认状态下的样式
                            label: {
                                show: true,//是否显示标签
                                textStyle: {
                                    color: "black"
                                }
                            }
                        },
                        zoom: 1.5,  //地图缩放比例,默认为1
                        emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
                            label: { show: true }
                        }
                    },
                    top: "3%",//组件距离容器的距离
                    data: result
                }
            ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myEcharts.setOption(option);
        }
    })
})